import CenterLabel from '@/components/header/header-ucenter-label'
import { useSiteSetting } from '@/hooks/siteSettings'
import { useUserStore } from '@/stores/auth'
import { has } from 'lodash-es'
import { defineComponent, h } from 'vue'
import { useI18n } from 'vue-i18n'
import { RouterLink, useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const router = useRouter()
    const { t } = useI18n()

    const userStore = useUserStore()
    const logOut = () => {
      userStore.M_logout()
      router.go(0)
    }
    //站点设置
    const site = useSiteSetting()
    const getLogoSize = () => {
      if (has(site.siteSetting.value.extends, 'header_logo_size')) {
        //存在logo size
        const logoSize: any = site.siteSetting.value.extends.header_logo_size
        return `width:${logoSize.width}px; height:${logoSize.height}px`
      } else {
        return `width:158px;height:48px;`
      }
    }
    //个人中心按钮配置
    const renderDiv = (options: { text: any; iconComponents?: any; callBack?: () => void }) => {
      return () => {
        return h(
          CenterLabel,
          { i18nLanguage: options.text, callBack: options.callBack },
          { default: () => h(options?.iconComponents) }
        )
      }
    }

    //个人中心 配置项
    const options = [
      {
        type: 'render',
        key: 'cert',
        render: renderDiv({
          text: 'header.Certificate',
          iconComponents: h('i', { class: 'i-mingcute:safety-certificate-line w-5 h-5' }),
          callBack: () => {
            window.open('https://platform-cert.s3.cn-northwest-1.amazonaws.com.cn/cacert.crt')
          }
        })
      },
      {
        type: 'render',
        key: 'logOut',
        render: renderDiv({
          text: 'button.logout',
          iconComponents: h('i', { class: 'i-solar:logout-3-linear w-5 h-5' }),
          callBack: () => {
            logOut()
          }
        })
      }
    ]

    return () => (
      <div class="h-20 !w-full " style="background-color:#11151e;">
        <a-row align="middle" class="h-full">
          <a-col span={11} offset={1}>
            <div class="flex flex-col px-2 h-15 justify-center">
              {/* <div
                class={['flex-shrink-0 bg-cover', !site.siteSetting.value.logo_description[site.lang.value] && 'mt-2']}
                style={`background:url('${
                  site.siteSetting.value.logo
                }') no-repeat;background-size:100% 100%;${getLogoSize()}`}
                
              >

              </div> */}
              <div
             
                class={['flex-shrink-0 bg-cover', !site.siteSetting.value.logo_description[site.lang.value] && 'mt-2']}
              
              >
 <img  style=" transform: scale(0.8)" src='/src/assets/login/翰海睿智登录页logo.png' alt="" />
  <span style="color:#fff;font-size:24px;" > {t('vuetitle.title')}</span>
              </div>
              {site.siteSetting.value.logo_description[site.lang.value] && (
                <p class="text-sm text-fonts-300">{site.siteSetting.value.logo_description[site.lang.value]}</p>
              )}
            </div>
          </a-col>

          <a-col span={11}>
            <a-row justify="end" gutter={[14, 14]}>
              <a-col>
                <a-row align="middle" gutter={8}>
                  <a-col>
                    <i class="i-material-symbols:house-rounded w-5 h-5 block  !text-white"></i>
                  </a-col>
                  <a-col>
                    <RouterLink class="text-gray-600 text-xl !text-white" to="/">
                      {t('header.home')}
                    </RouterLink>
                  </a-col>
                </a-row>
              </a-col>
              <a-col>
                <a-row align="middle" gutter={8}>
                  <a-col>
                    <i class="w-5 h-5 i-carbon:flag-filled block  !text-white"></i>
                  </a-col>
                  <a-col>
                    <RouterLink class="text-gray-600 text-xl !text-white" to="/main/competition">
                      {t('header.competition')}
                    </RouterLink>
                  </a-col>
                </a-row>
              </a-col>
              <a-col>
                <a-row align="middle" gutter={8}>
                  <a-col>
                    <i class="w-5 h-5 i-ic:baseline-live-help block  !text-white"></i>
                  </a-col>
                  <a-col>
                    <RouterLink class="text-xl !text-white" to="/main/helper">
                      {t('header.help')}
                    </RouterLink>
                  </a-col>
                </a-row>
              </a-col>
              <a-col>
                <a-row align="middle" gutter={8}>
                  <a-col>
                    <i class="w-5 h-5 block i-material-symbols:person !text-white"></i>
                  </a-col>
                  <a-col>
                    <a-dropdown
                      class="text-gray-600"
                      v-slots={{
                        overlay: () => (
                          <a-menu>
                            {options.map((x) => (
                              <a-menu-item>{h(x.render)}</a-menu-item>
                            ))}
                          </a-menu>
                        )
                      }}
                    >
                      <a class="ant-dropdown-link text-xl !text-white">{t('header.button')}</a>
                    </a-dropdown>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
    )
  }
})
